<template>
  <el-dialog
    @close="reset"
    :title="seckillData.id > 0 ? '编辑' : '新增'"
    :visible.sync="info.isShow"
  >
    <el-form
      ref="seckillForm"
      label-width="80px"
      :model="seckillData"
      :rules="rules"
    >
      <el-form-item label="活动名称" prop="title">
        <el-input
          placeholder="活动名称"
          v-model.trim="seckillData.title"
        ></el-input>
      </el-form-item>
      <el-form-item label="一级分类" prop="first_cateid">
        <el-select
          @change="firstCateChange"
          v-model.trim="seckillData.first_cateid"
          placeholder="一级分类"
        >
          <el-option
            v-for="item in cateList"
            :key="item.id"
            :value="item.id"
            :label="item.catename"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类" prop="second_cateid">
        <el-select
          @change="secondCateChange"
          v-model.trim="seckillData.second_cateid"
          placeholder="二级分类"
        >
          <el-option
            v-for="item in secondCateList"
            :key="item.id"
            :value="item.id"
            :label="item.catename"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="活动商品" prop="goodsid">
        <el-select v-model.trim="seckillData.goodsid">
          <el-option
            v-for="item in goodsList"
            :key="item.id"
            :value="item.id"
            :label="item.goodsname"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="开始时间" prop="begintime">
        <el-date-picker
          default-time="12:00:00"
          v-model.trim="seckillData.begintime"
          type="datetime"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间" prop="endtime">
        <el-date-picker
          default-time="12:00:00"
          type="datetime"
          v-model.trim="seckillData.endtime"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="活动状态" prop="status">
        <el-radio-group v-model.trim="seckillData.status">
          <el-radio :label="1">正常</el-radio>
          <el-radio :label="2">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div class="dialog-footer" slot="footer">
      <el-button @click="reset">取消</el-button>
      <el-button type="primary" @click="submit">提交</el-button>
    </div>
  </el-dialog>
</template>

<script>
// 导入日期格式函数
import { dateFmt } from "../../utlis/common";
// 导入数据请求方法
import { getGoodsListBySid } from "../../request/goods";
// 导入vuex辅助函数
import { mapState, mapActions } from "vuex";
const initData = {
  id: "",
  title: "",
  first_cateid: "",
  second_cateid: "",
  goodsid: "",
  begintime: "",
  endtime: "",
  status: "",
};
export default {
  computed: {
    ...mapState("cate", ["cateList"]),
  },
  methods: {
    ...mapActions("cate", ["getCateListAction"]),
    ...mapActions("seckill", ["getSeckillListAction"]),
    // 更新表单数据
    setFormData(obj) {
      // 将开始时间和结束时间转换成日期字符串
      this.seckillData = { ...obj };
      this.seckillData.begintime = dateFmt(this.seckillData.begintime);
      this.seckillData.endtime = dateFmt(this.seckillData.endtime);
      // 手动调用一级分类下拉框change事件处理函数
      this.firstCateChange(obj.first_cateid, false);
      // 手动调用二级分类下拉框change事件处理函数
      this.secondCateChange(obj.second_cateid, false);
    },
    // 数据重置
    reset() {
      // 关闭对话框
      this.info.isShow = false;
      // 重置表单元素
      this.seckillData = { ...initData };
    },
    submit() {
      this.$refs.seckillForm.validate((valid) => {
        if (valid) {
          // 将开始时间和结束时间转换成时间戳
          this.seckillData.begintime = new Date(
            this.seckillData.begintime
          ).getTime();
          this.seckillData.endtime = new Date(
            this.seckillData.endtime
          ).getTime();
          // 发送数据请求
          const url = this.seckillData.id > 0 ? "/seckedit" : "/seckadd";
          this.$axios.post(url, this.seckillData).then((res) => {
            if (res.code === 200) {
              this.$message.success(res.msg);
              // 更新活动列表
              this.getSeckillListAction();
              // 重置数据
              this.reset();
            } else {
              this.$message.error(res.msg);
            }
          });
        }
      });
    },
    // 一级分类下拉框chnage事件处理函数
    firstCateChange(firstCateId, flag = true) {
      // 根据分类id查找分类索引
      const index = this.cateList.findIndex((item) => item.id === firstCateId);
      // 更新二级分类数组
      if (this.cateList[index].children) {
        this.secondCateList = this.cateList[index].children;
      } else {
        // 清除上一次选择过的一级分类所属的二级分类数据
        this.secondCateList = [];
      }
      // 清除用户上次选择的二级分类: 通过鼠标点击一级分类下拉框的时候, 需要清空二级分类id和商品id; 手动调用firstCateChange的时候, 不需要清空二级分类id和商品id
      if (flag) {
        this.seckillData.second_cateid = "";
        // 清除用户已选择的商品
        this.seckillData.goodsid = "";
      }
      // 清除商品列表
      this.goodsList = [];
    },
    // 二级分类下拉框change事件处理函数
    secondCateChange(sid, flag = true) {
      getGoodsListBySid(sid).then((res) => {
        if (res.code === 200) {
          // 更新商品列表
          this.goodsList = res.list;
        }
      });
      // 清除用户已选择的商品: 通过鼠标点击二级分类下拉框的时候需要清除商品id, 手动调用secondCateChange的时候不能清除商品id
      if (flag) {
        this.seckillData.goodsid = "";
      }
    },
  },
  created() {
    //  请求分类列表
    this.getCateListAction();
  },
  props: ["info"],
  data() {
    // 自定义表单校验函数
    const validEndtime = (rule, value, callback) => {
      if (this.seckillData.endtime <= this.seckillData.begintime) {
        return callback(new Error("结束时间必须大于开始时间"));
      }
      callback();
    };
    return {
      // 商品列表
      goodsList: [],
      // 二级分类列表
      secondCateList: [],
      // 表单数据对象
      seckillData: {
        ...initData,
      },
      //   表单校验规则对象
      rules: {
        title: { required: true, message: "请输入活动名称", trigger: "blur" },
        first_cateid: {
          required: true,
          message: "请选择一级分类",
          trigger: "blur",
        },
        second_cateid: {
          required: true,
          message: "请选择二级分类",
          trigger: "blur",
        },
        goodsid: { required: true, message: "请选择活动商品", trigger: "blur" },
        begintime: {
          required: true,
          message: "请选择活动开始时间",
          trigger: "blur",
        },
        endtime: [
          {
            required: true,
            message: "请选择活动结束时间",
            trigger: "blur",
          },
          {
            validator: validEndtime,
            trigger: "blur",
          },
        ],
        status: { required: true, message: "请选择活动状态", trigger: "blur" },
      },
    };
  },
};
</script>

<style>
</style>